<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				margin: 50px auto 0;
			}
			ul{
				padding: 0;
				margin: 0;
				background-color: #f7f7f7;
				border: 1px solid #eee;
				border-bottom: 1px solid #e4393c;
			}
			li{
				list-style-type: none;
				padding: 0;
				display: inline-block;
				padding: 10px 25px;
				cursor: pointer;
				font-size: 14px;
			}
			.cur{
				background-color: #e4393c;
				color: #FFF;
			}
			.tab-box{
				padding: 10px;
			}
			.items{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="cur">商品介绍</li>
				<li>规格与包装</li>
				<li>售后保障</li>
				<li>商品评价</li>
			</ul>
			<div class="tab-box">
				<div class="items" style="display: block;">商品介绍</div>
				<div class="items">规格与包装</div>
				<div class="items">售后保障</div>
				<div class="items">商品评价</div>
			</div>
		</div>
		<script>
		/*
		 获取元素自定义属性: element.getAttribute('属性名')，只有一个参数
		 设置元素自定义属性: element.setAttribute(‘属性名’，‘属性值’) 两个参数： 第一个参数是属性名，第二个是属性值
		 通过标签名、class、id获取标签：document.querySelector()
		 document.querySelectorAll()
		*/
		// 通过标签名获取
		// var query0 = document.querySelectorAll('div')
		// 通过id获取
		// var query1 = document.querySelector('#id')
		// 通过class获取
		// var query2 = document.querySelector('.class')
		
			// 获取li合集
			var li = document.getElementsByTagName('li')
			var items = document.getElementsByClassName('items')
			for (var i = 0; i < li.length; i++) {
				li[i].setAttribute('indexkey',i)
				
				// 给每个li添加点击事件
				li[i].onmouseenter = function (event) {
					for (var j = 0; j < li.length; j++) {
						// 给每个li去掉class=“cur”
						li[j].className = ''
					}
					// 当前点击的li添加class="cur"
					this.className = 'cur'
					// 当前li的下边
					var index = this.getAttribute('indexkey')
					
					for (var y = 0; y < items.length; y++) {
						// 所有itemsdisplay=“none”
						items[y].style.display = 'none'
					}
					// 当前点击的下标 index
					items[index].style.display = 'block'
				}
			}
		</script>
	</body>
</html>
